import React from 'react';
import { Button, Dropdown, Icon, LocaleProvider, Menu, Table } from 'antd';
import zhCN from 'antd/lib/locale-provider/zh_CN';
import { FieldSet } from '../components';
import { uuid } from '../utils/uuid';
import { exportExcel } from '../utils/fileOpt';

export default class GeneratorTable extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      columns: props.columns,
      data: [],
      count: 10,
    };
    this.rowIndex = -1;
  }
  _calcFilterData = (data = [], columns = []) => {
    const filtersObj = columns
      .filter(c => c.filters)
      .reduce((a, b) => {
        const tempA = {...a};
        tempA[b.key] = [];
        return tempA;
        }, {});
    data.forEach((d) => {
      Object.keys(d).forEach((field) => {
        if (filtersObj[field] && !filtersObj[field].includes(d[field])) {
          filtersObj[field].push(d[field]);
        }
      });
    });
    return filtersObj;
  };
  _generator = () => {
    const { demoData = {}, getDataFuc } = this.props;
    const { columns, count } = this.state;
    getDataFuc && getDataFuc(count).then((res) => {
      this.rowIndex = -1;
      const data = res.map(d => (columns.reduce((a, b) => {
        const tempA = {...a};
        tempA[b.key] = d[b.key] || demoData[b.key] || d;
        return tempA;
      }, { key: uuid() })));
      const filters = this._calcFilterData(data, columns);
      this.setState({
        data,
        columns: columns.map((c) => {
          return {
            ...c,
            filters: filters[c.key] && filters[c.key].map(f => ({text: f, value: f})),
          };
        }),
      });
    });
  };
  _setGeneratorCount = (count) => {
    this.setState({
      count,
    });
  };
  _clearData = () => {
    const { columns } = this.state;
    this.setState({
      data: [],
      columns: columns.map(c => ({
        ...c,
        filters: undefined,
      })),
    });
  };
  _renderRow = (row) => {
    this.rowIndex += 1;
    const name = this.rowIndex % 2;
    return <tr className={`data-mocker-table-row-${name === 0 ? 'one' : 'second'}`}>{row.children}</tr>;
  };
  _exportExcel = () => {
    const x = this.state.columns.reduce((a, b) => a + (b.width || 0), 0);
    exportExcel(this.state.columns, this.state.data, this.props.name, x);
  };
  render() {
    const { columns, data, count } = this.state;
    const x = columns.reduce((a, b) => a + (b.width || 0), 0);
    const { y } = this.props;
    return (
      <FieldSet legend='生成结果'>
        <div>
          <div className='data-mocker-identity-header'>
            <div className='data-mocker-identity-buttons'>
              <Button onClick={this._generator}>生成</Button>
              <Button onClick={this._exportExcel}>导出</Button>
              <Button onClick={this._clearData}>清空</Button>
            </div>
            <div className='data-mocker-identity-filters'>
              <span className='data-mocker-identity-filters-count'>
                <span>生成数量</span>
                <span>
                  <Dropdown overlay={<Menu>
                    <Menu.Item>
                      <a onClick={() => this._setGeneratorCount(10)}>10条</a>
                    </Menu.Item>
                    <Menu.Item>
                      <a onClick={() => this._setGeneratorCount(100)}>100条</a>
                    </Menu.Item>
                    <Menu.Item>
                      <a onClick={() => this._setGeneratorCount(1000)}>1000条</a>
                    </Menu.Item>
                  </Menu>}>
                    <span className='data-mocker-identity-filters-count-hover'>{count}条<Icon type="down" /></span>
                  </Dropdown>
                </span>
              </span>
            </div>
          </div>
          <div className='data-mocker-identity-table'>
            <LocaleProvider locale={zhCN}>
              <Table
                className='data-mocker-nowrap'
                rowKey='key'
                columns={columns}
                dataSource={data}
                scroll={{ y, x }}
                components={{
                  body: {
                    row: this._renderRow,
                  },
                }}
              />
            </LocaleProvider>
          </div>
        </div>
      </FieldSet>
    );
  }
}
